<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-19 00:00
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <!--  布局的整体插槽-->
  <x-render-extend-slot
    v-if="hasSlot(attrs.layoutName)"
    :componentFunc="getSlot(attrs.layoutName)"
    :data="attrs"
  ></x-render-extend-slot>
  <div v-else class="x-render-slot-container">
    <span>固定插槽 插槽名称:{{attrs.layoutName}}</span>
  </div>
</template>

<script>
import { COMPONENT_TYPE } from '../../constants'
import ComponentMixin from '../../XRenderMixins/XRenderComponentMixin'
import XRenderExtendSlotMixin from '../../XRenderMixins/XRenderExtendSlotMixin'

export default {
  name: COMPONENT_TYPE.LAYOUT_SLOT,
  mixins: [ComponentMixin, XRenderExtendSlotMixin]
}
</script>

<style scoped lang="css">
.x-render-slot-container {
  width: 100%;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 14px;
  background-color: #fff;
  border: 1px dashed #dcdfe6;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>
